<template>
	<view class="verify app">
		<!-- 输入框搜索 -->
		<view class="verify_header">
			<view class="verify_header_input">
				<image class="verify_header_input_icon" src="http://yanxuan.nosdn.127.net/hxm/yanxuan-wap/p/20161201/style/img/icon-normal/search2-2fb94833aa.png"></image>
				<input class="verify_header_input_keywrod" auto-focus placeholder-style='color:#999' placeholder="请输入河道关键字"
				 @confirm="inputsearch" type="text" v-model="keyword" confirm-typ="search" />
				<image class="verify_header_input_del" @tap="empty" src="http://nos.netease.com/mailpub/hxm/yanxuan-wap/p/20150730/style/img/icon-normal/clearIpt-f71b83e3c2.png" />
			</view>
		</view>
		<!-- 列表 -->
		<scroll-view class="verify_scroll" scroll-y lower-threshold="200" @scrolltolower="scrolltolower">
			<block v-if="dataList.length !== 0">
				<view class="verify_scroll_list">
					<view class="verify_scroll_list_item" v-for="(itemObj, index) in dataList" :key="index" @tap="goDetail(itemObj)">
						<view class="manage">
							<view v-if="itemObj.createTime" class="verify_scroll_list_item-time">{{itemObj.createTime.value}}</view>
							<view v-if="itemObj.uploadTime" class="verify_scroll_list_item-time">{{itemObj.uploadTime.value}}</view>
							<view class="manage_info">查看详情</view>
							<image class="manage_arrow" src="/static/arrow-right.png" />
						</view>
						<view class="verify_scroll_list_item_detail">
							<!-- 河道河段信息 -->
							<!-- <view class="verify_scroll_list_item_detail-name">{{itemObj.ticketName || ''}}</view> -->
							<view v-if="itemObj.rivername" class="verify_scroll_list_item_detail_info">
								<view class="verify_scroll_list_item_detail_info-desc">{{itemObj.rivername.name}}:</view>
								<view class="verify_scroll_list_item_detail_info-info2">{{itemObj.rivername.value || 0}}</view>
							</view>
							<view v-if="itemObj.rivertype" class="verify_scroll_list_item_detail_info">
								<view class="verify_scroll_list_item_detail_info-desc">{{itemObj.rivertype.name}}:</view>
								<view class="verify_scroll_list_item_detail_info-info2">{{itemObj.rivertype.value || 0}}</view>
							</view>

							<view v-if="itemObj.headstream" class="verify_scroll_list_item_detail_info">
								<view class="verify_scroll_list_item_detail_info-desc">{{itemObj.headstream.name || ''}}:</view>
								<view class="verify_scroll_list_item_detail_info-info2">{{itemObj.headstream.value || ''}}</view>
							</view>
							<view v-if="itemObj.riverlevel" class="verify_scroll_list_item_detail_info">
								<view class="verify_scroll_list_item_detail_info-desc">{{itemObj.riverlevel.name || ''}}:</view>
								<view class="verify_scroll_list_item_detail_info-info2">{{itemObj.riverlevel.value || ''}}</view>
							</view>
							<!-- 违法信息 -->
							<view v-if="itemObj.belongRiver" class="verify_scroll_list_item_detail_info">
								<view class="verify_scroll_list_item_detail_info-desc">{{itemObj.belongRiver.name || ''}}:</view>
								<view class="verify_scroll_list_item_detail_info-info2">{{itemObj.belongRiver.value || ''}}</view>
							</view>
							<view v-if="itemObj.belongReach" class="verify_scroll_list_item_detail_info">
								<view class="verify_scroll_list_item_detail_info-desc">{{itemObj.belongReach.name || ''}}:</view>
								<view class="verify_scroll_list_item_detail_info-info2">{{itemObj.belongReach.value || ''}}</view>
							</view>
							<view v-if="itemObj.source" class="verify_scroll_list_item_detail_info">
								<view class="verify_scroll_list_item_detail_info-desc">{{itemObj.source.name || ''}}:</view>
								<view class="verify_scroll_list_item_detail_info-info2">{{itemObj.source.value || ''}}</view>
							</view>
							<view v-if="itemObj.lawTime" class="verify_scroll_list_item_detail_info">
								<view class="verify_scroll_list_item_detail_info-desc">{{itemObj.lawTime.name || ''}}:</view>
								<view class="verify_scroll_list_item_detail_info-info2">{{itemObj.lawTime.value || ''}}</view>
							</view>
							<!-- 执法信息 -->
							<view v-if="itemObj.number" class="verify_scroll_list_item_detail_info">
								<view class="verify_scroll_list_item_detail_info-desc">{{itemObj.number.name || ''}}:</view>
								<view class="verify_scroll_list_item_detail_info-info2">{{itemObj.number.value || ''}}</view>
							</view>
							<view v-if="itemObj.enforceAdmin" class="verify_scroll_list_item_detail_info">
								<view class="verify_scroll_list_item_detail_info-desc">{{itemObj.enforceAdmin.name || ''}}:</view>
								<view class="verify_scroll_list_item_detail_info-info2">{{itemObj.enforceAdmin.value || ''}}</view>
							</view>
							<view v-if="itemObj.enforceTime" class="verify_scroll_list_item_detail_info">
								<view class="verify_scroll_list_item_detail_info-desc">{{itemObj.enforceTime.name || ''}}:</view>
								<view class="verify_scroll_list_item_detail_info-info2">{{itemObj.enforceTime.value || ''}}</view>
							</view>
							<view v-if="itemObj.enforceType" class="verify_scroll_list_item_detail_info">
								<view class="verify_scroll_list_item_detail_info-desc">{{itemObj.enforceType.name || ''}}:</view>
								<view class="verify_scroll_list_item_detail_info-info2">{{itemObj.enforceType.value || ''}}</view>
							</view>
						</view>
					</view>
				</view>
			</block>
			<block v-else>
				<view class="verify_scroll_nodata">
					<image class="verify_scroll_nodata-img" src="/static/nodata_ticket.png" />
					<view class="verify_scroll_nodata-name">暂无数据~~</view>
				</view>
			</block>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'infoList',
		props: {
			// 跳转的地址
			jumpAddress: {
				type: String,
				default: ''
			},
			// 数据列表
			dataList: {
				type: Array,
				default () {
					return []
				}
			},
			// 关键字
			keyword: {
				type: String,
				default: ''
			}
		},
		data() {
			return {

			}
		},
		watch: {},
		created() {
			console.log(this.dataList)
		},
		methods: {
			goDetail(e) {
				// let detail = {
				// 	createTime: e.createTime,
				// 	rivername: e.rivername,
				// 	rivertype: e.rivertype,
				// 	riverlenth: e.riverlenth,
				// 	riverarea: e.riverarea,
				// 	headstream: e.headstream,
				// 	riverlevel: e.riverlevel,
				// 	opencoordinate: e.opencoordinate,
				// 	endcoordinate: e.endcoordinate,
				// 	desc: e.desc
				// }
				uni.navigateTo({
					url: this.jumpAddress + "?detailDate=" + encodeURIComponent(JSON.stringify(
						e))
				})
			},
			empty() {
				this.keyword = ""
			},
			// 滚动列表
			scrolltolower() {
				if (this.dataList.length >= this.total) return;
				this.$_getDataList({
					notInit: true,
					hideT: true
				});
			}
		}
	}
</script>
<style>
	page {
		background: #F4F5F6;
	}
</style>
<style lang="scss" scoped>
	.manage {
		@include flexLine;
		height: 60upx;

		&_info {
			padding: 16upx 0 16upx 30upx;
			display: inline-block;
			font-size: 26upx;
			color: #999;
			position: absolute;
			right: 40px;
		}

		&_arrow {
			display: inline-block;
			padding: 20upx 0 16upx 30upx;
			position: absolute;
			right: 30px;
			margin-left: 14upx;
			width: 10upx;
			height: 18upx;
		}
	}

	.verify {
		// background: #EEEEEE;
		background: #F5F5F5;

		&_header {
			align-items: center;
			width: 702upx;
			height: 110upx;
			display: flex;
			background: #fff;
			padding: 0 24upx;
			font-size: 28upx;
			color: #333;
			z-index: 2;

			&_input {
				display: flex;
				align-items: center;
				width: 100%;
				line-height: 70upx;
				padding: 10upx 20upx;
				background: #F5F5F5;
				border-radius: 38upx;

				&_icon {
					width: 40upx;
					height: 36upx;
				}

				&_keywrod {
					width: 100%;
					height: 59upx;
					padding-left: 30upx;
					@include fzc(28upx, #333)
				}

				&_del {
					width: 60upx;
					height: 52upx;
					z-index: 10;
				}
			}

			&_right {
				margin-top: 24upx;
				margin-left: 24upx;
				margin-right: 6upx;
				width: 58upx;
				height: 43upx;
				line-height: 43upx;
				float: right;
			}

		}

		&_scroll {
			position: absolute;
			top: 110upx;
			left: 0;
			right: 0;
			bottom: 0;

			&_list {
				padding-bottom: 40upx;

				&_item {
					overflow: hidden;
					margin: 24upx;
					background: #FFFFFF;
					border-radius: 24upx;

					&-time {
						@include fzc;
						padding-left: 26upx;
						line-height: 60upx;
					}

					&_detail {
						border-top: #EEEEEE solid 1upx;

						margin: 26upx {
							top: 0;
							bottom: 10upx;
						}

						;

						&-name {
							@include fzc;
							font-weight: bold;
							line-height: 60upx;
						}

						&_info {
							@include flexLine;
							justify-content: space-between;
							height: 50upx;
							align-items: center;

							&-desc {
								@include fzc;
							}

							&-info {
								@include fzc;
							}

							&-info2 {
								@include fzc($c: #FF9800);
							}
						}
					}
				}
			}

			&_nodata {
				overflow: hidden;
				text-align: center;

				&-img {
					margin: 150upx 0 10upx;
					width: 526upx;
					height: 315upx;
				}

				&-name {
					@include fzc($c: #999);
				}
			}
		}
	}
</style>
